<template>
  <div style="width:100%;height: 250px;">
    <div class="main-warp" style="width:100%;height: 265px;position: relative">
        <div ref="echartsWordcloud" style="width:calc(100% + 80px);height: 265px;z-index: 10;position: absolute;left:-40px"></div>
    </div>
  </div>
</template>
<script>
import 'echarts-wordcloud'

export default {
  data() {
    return {
      words:[
        { name: "互联网服务", value: 1000 },
        { name: "交通运输", value: 850 },
        { name: "公司", value: 800 },
        { name: "军工", value: 600 },
        { name: "医药", value: 900 },
        { name: "商务服务", value: 600 },
        { name: "城乡规划", value: 800 },
        { name: "家政服务", value: 400 },
        { name: "安防", value: 850 },
        { name: "医疗服务", value: 200 },
        { name: "电子科技", value: 2000 },
        { name: "航空航天", value: 1500 },
        { name: "食品饮料", value: 1500 },
        { name: "能源", value: 800 },
        { name: "教育培训", value: 200 },
        { name: "金融", value: 100 },
        { name: "文化娱乐", value: 250 },
        { name: "电力", value: 1200 },
        { name: "石油化工", value: 300 },
        { name: "电子商务", value: 900 },
        { name: "建筑", value: 700 },
        { name: "旅游", value: 550 },
        { name: "环保", value: 750 },
        { name: "地产", value: 1100 },
        { name: "体育", value: 300 },
        { name: "通信", value: 950 },
        { name: "科研", value: 1200 },
        { name: "物流", value: 1300 },
        { name: "咨询", value: 600 },
        { name: "游戏", value: 850 },
        { name: "人力资源", value: 500 },
        { name: "水务", value: 300 },
        { name: "舞蹈艺术", value: 150 },
        { name: "汽车制造", value: 1100 },
        { name: "电影制作", value: 350 },
        { name: "游乐园", value: 250 },
        { name: "新能源", value: 900 },
        { name: "服装设计", value: 400 },
        { name: "采矿", value: 700 },
        { name: "信息安全", value: 800 },
        { name: "化妆品", value: 600 },
        { name: "音乐产业", value: 750 },
        { name: "物联网", value: 1200 },
        { name: "绿色建筑", value: 850 },
        { name: "社交媒体", value: 950 },
        { name: "人工智能", value: 1000 },
        { name: "水产养殖", value: 320 },
        { name: "医学研究", value: 1800 },
        { name: "动物保护", value: 130 },
        { name: "航海", value: 1000 }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchart()
    })
  },
  methods: {
    initEchart() {
      const el = this.$refs.echartsWordcloud
      this.chart = this.$echarts.init(el)
      let colorList = ['#819cd9','#d3e4ff','#d4d4ff'];
      //按照colorList指定颜色的数据进行随机
      const option = {
        tooltip: {
          show: true
        },
        series: [
          {
            shape:'circle',
            //用来调整词之间的距离
            gridSize: 5,
            rotationRange: [0, 0],
            //用来调整字的大小范围
            sizeRange: [8,36],
            type: 'wordCloud',
            textPadding: 0,

            left: "center",
            drawOutOfBound: false,
            shrinkToFit: false,
            layoutAnimation: true,

            top: "center",
            textStyle: {
              color: function () {
                let index = Math.floor(Math.random() * 3);
                return colorList[index]
              },
              fontFamily:'阿里妈妈方圆体 VF Regular'

            },
            data: this.words
          }
        ]
      }
      //设置图表的参数
      this.chart.setOption(option)
    }
  }
}
</script>
